<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3" title="常用功能">
      <van-grid-item v-for="(item,itemIndex) in items3" :key="itemIndex" :icon="item.icon" :text="item.title" @click="goto(item.url)">
      </van-grid-item>
    </van-grid>

  </div>
</template>

<script>
  import Vue from 'vue';
  import { Swipe, SwipeItem } from 'vant';
  
  Vue.use(Swipe);
  Vue.use(SwipeItem);

  export default {
    name: 'HomeView',
  data:function () {
    return{
      items3: [
        {
          title:'房间预定',
          icon: 'https://gw.alipayobjects.com/mdn/rms_3a7189/afts/img/A*L8FjQ7lSdq4AAAAAAAAAAAAAARQnAQ',
          url:'/RoomlistView',
        },
        {
          title: '长住房申请',
          icon: 'https://gw.alipayobjects.com/mdn/rms_3a7189/afts/img/A*L8FjQ7lSdq4AAAAAAAAAAAAAARQnAQ',
          url:'/pages/bill/long-order/long-order',
        },
        {
          title: '假期订房',
          icon: 'https://gw.alipayobjects.com/mdn/rms_3a7189/afts/img/A*L8FjQ7lSdq4AAAAAAAAAAAAAARQnAQ',
          url:'/pages/room-list/room-list'
        },
      ],
    };
  },
   methods:{
      goto(url){
        this.$router.push({path:url})
      }
   }
  }
</script>

<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
